<template>
  <div>
    <el-dialog title="选择设备" :visible="visible" @close="onClose" width="85%">
      <el-form :inline="true" :model="form" ref="formRef">
        <el-form-item label="设备场景">
          <el-select v-model="form.xxx" placeholder="请选择" style="width: 130px">
            <el-option label="全部" value="1"></el-option>
            <el-option label="收费网" value="2"></el-option>
            <el-option label="监控网" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="适用类型">
          <el-select v-model="form.yyy" placeholder="请选择" style="width: 130px">
            <el-option label="类型1" value="1"></el-option>
            <el-option label="类型2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="form.zzz" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list" border style="width: 100%" @selection-change="onSelectionChange">
        <!-- width="180" -->
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="aaa" label="设备名称"> </el-table-column>
        <el-table-column prop="bbb" label="设备地点"> </el-table-column>
        <el-table-column prop="ccc" label="IP地址"> </el-table-column>
        <el-table-column prop="ddd" label="首次告警时间" width="135"> </el-table-column>
        <el-table-column prop="eee" label="告警持续时间"> </el-table-column>
        <el-table-column prop="fff" label="故障类型"> </el-table-column>
        <el-table-column prop="ggg" label="设备等级"> </el-table-column>
        <el-table-column prop="hhh" label="归属单元"> </el-table-column>
      </el-table>
      <div class="pagination-box">
          <div>共{{page.total}}条</div>          
          <el-pagination
            @current-change="onCurrentChange"
            :current-page="page.page"
            :page-size="page.size"
            layout="prev, pager, next"
            :total="page.total"
          >
          </el-pagination>
      </div>
      <span slot="footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onSumbit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {deepClone} from '../../../utils/index.js'
export default {
  name: "SelectDevice",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
      form: {
        xxx: undefined,
        yyy: undefined,
        zzz: undefined,
      },
      list: [],
      page: {
        page: 1,
        size: 5,
        total: 0,
      },
      selected: []
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    getList() {
      let data = {};
      function mockList(k) {
        return {
          id: k,
          aaa: `名称${k}`,
          bbb: `地点${k}`,
          ccc: `192.168.31.${k}`,
          ddd: `2020-10-0${k} 10:0${k}`,
        //   eee: `0${k}天0${k}小时0${k}分钟`,
        eee: `${k}小时${k}分钟`,
          fff: `类型${k}`,
          ggg: `等级${k}`,
          hhh: `单元${k}`,
        };
      }
      if (this.page.page === 1) {
        data = {
          list: Array.from({ length: 5 }, (v, k) => mockList(k)),
          total: 12,
        };
      }else if (this.page.page === 2) {
        data = {
          list: Array.from({ length: 5 }, (v, k) => mockList(5 + k)),
          total: 12,
        };
      } else if (this.page.page === 3) {
        data = {
          list: Array.from({ length: 2 }, (v, k) => mockList(10 + k)),
          total: 12,
        };
      }
      this.list = data.list;
      this.page.total = data.total;
    },
    onClose() {
      this.list = [];
      this.selected = []
      this.$emit("update:visible", false);
    },
    onReset(){
      this.$refs.formRef.resetFields();
      this.getList()
    },
    onSearch(){
      this.getList()
    },
    onSumbit() {
      if(this.selected.length > 0){
        this.$emit('select', deepClone(this.selected))
      }
      this.onClose();
    },
    onCurrentChange(val) {
      this.page.page = val;
      this.getList();
    },
    onSelectionChange(val){
    //   console.log('selected',val)
      this.selected = val
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.getList();
      }
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body{
    padding-top: 0 !important;
}
.pagination-box{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
</style>
